<template>
	<!--供应商信息-物资名称分类-新增/编辑物资名称弹窗-表单-->
	<a-spin :spinning="confirmLoading">
		<j-form-container class="scroll-view" style="height: 600px;">
			<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
				<a-row>
					<a-col :span="24">
						<a-form-model-item label="一级分类名称" :labelCol="labelCol" :wrapperCol="wrapperCol"
							prop="categoryOneId" style="margin-bottom: 10px;">
							<a-select :disabled="model.status === '1' ? true:false" :options="levelOneOptions"
								v-model="model.categoryOneId" placeholder="请输入一级分类名称" @change="changeLevelOne">

							</a-select>
						</a-form-model-item>
					</a-col>
					<a-col :span="24">
						<a-form-model-item label="二级分类名称" :labelCol="labelCol" :wrapperCol="wrapperCol"
							prop="categoryTwoId" style="margin-bottom: 10px;">
							<a-select :disabled="model.status === '1' ? true:false" :options="levelTwoOptions"
								v-model="model.categoryTwoId" placeholder="请输入二级分类名称" @change="changeLevelTwo">

							</a-select>
						</a-form-model-item>
					</a-col>
					<a-col :span="24">
						<a-form-model-item label="三级分类名称" :labelCol="labelCol" :wrapperCol="wrapperCol"
							prop="categoryThreeId" style="margin-bottom: 10px;">
							<a-select :disabled="model.status === '1' ? true:false" :options="levelThreeOptions"
								v-model="model.categoryThreeId" placeholder="请输入三级分类名称">

							</a-select>
						</a-form-model-item>
					</a-col>
					<a-col :span="24">
						<a-form-model-item label="标准名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name"
							style="margin-bottom: 10px;">
							<a-input :disabled="model.status === '1' ? true:false" v-model="model.name"
								placeholder="请输入标准名称"></a-input>
						</a-form-model-item>
					</a-col>
					<a-col :span="24">
						<a-form-model-item label="材质" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="texture"
							style="margin-bottom: 10px;">
							<a-input v-model="model.texture" placeholder="请输入材质"></a-input>
						</a-form-model-item>
					</a-col>
					<a-col :span="24">
						<a-form-model-item label="型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="model"
							style="margin-bottom: 10px;">
							<div class="components-input-demo-size">
								<a-input style="width:145px" id="t1" v-for="(item,i) of items" v-model="items[i]"
									:key="i" size="small" placeholder="请输入型号" />
							</div>
							<div>
								<a-button type="primary" icon="plus" @click="onAdd" style="margin-right:5px"></a-button>
								<a-button type="primary" icon="minus" @click="onMinus"></a-button>
							</div>
						</a-form-model-item>
					</a-col>
					<a-col :span="24">
						<a-form-model-item label="计量单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unit"
							style="margin-bottom: 10px;">
							<a-input v-model="model.unit" placeholder="请输入计量单位"></a-input>
						</a-form-model-item>
					</a-col>
					<a-col :span="24">
						<a-form-model-item label="是否直进直出" :labelCol="labelCol" :wrapperCol="wrapperCol"
							prop="isIngressEgress" style="margin-bottom: 10px;">
							<a-radio-group :options="isIngressEgressList"
								:default-value="model.isIngressEgress" @change="onChange('isIngressEgress',$event)"
								style="margin-left: 10px;" />
						</a-form-model-item>
					</a-col>
					<a-col :span="24">
						<a-form-model-item label="备注说明" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark"
							style="margin-bottom: 10px;">
							<a-input v-model="model.remark" placeholder="请输入备注说明"></a-input>
						</a-form-model-item>
					</a-col>
				</a-row>
			</a-form-model>
		</j-form-container>
	</a-spin>
</template>
<script>
	import {
		httpAction,
		getAction
	} from '@/api/manage'
	import {
		validateDuplicateValue
	} from '@/utils/util'
	export default {
		name: 'WtPlatformProductForm',
		components: {
			// JTreeSelect
		},
		props: {
			//表单禁用
			disabled: {
				type: Boolean,
				default: false,
				required: false
			},

		},
		data() {
			return {
				model: {
					categoryOneId: '',
					categoryTwoId: '',
					categoryThreeId: '',
					model: '',
					status: '',
					isIngressEgress:'0',
				},
				labelCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 5
					},
				},
				wrapperCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 16
					},
				},
				confirmLoading: false,
				validatorRules: {},

				arrayData: [],
				treeData: [],
				levelOneOptions: [],
				levelTwoOptions: [],
				levelThreeOptions: [],
				isIngressEgressList: [ {
					label: '否',
					value: '0'
				},{
					label: '是',
					value: '1'
				}],
				items: [],
				url: {
					list: "/wtCategory/list",
					add: "/product/wtPlatformProduct/add",
					edit: "/product/wtPlatformProduct/edit",
					queryById: "/product/wtPlatformProduct/queryById"
				}
			}
		},
		computed: {
			formDisabled() {
				return this.disabled
			},
		},
		created() {
			//备份model原始值
			this.modelDefault = JSON.parse(JSON.stringify(this.model));
		},
		methods: {
			onChange(type, item, ) {
			  console.log(1, type, item);
			  if (type === 'isIngressEgress') {
			    this.model.isIngressEgress = item.target.value;
			  }
			},
			updata(val, record) {
				console.log(1, val, record);
				if (val) {
					this.model.status = '1';
				} else {
					this.model.status = '0';
				}
				this.$forceUpdate();
			},
			changeLevelOne() {
				this.model.categoryTwoId = this.model.categoryThreeId = ''
				this.levelThreeOptions = []
				const item = this.treeData.find(v => v.id === this.model.categoryOneId)
				this.levelTwoOptions = (item.children || []).map(v => {
					return {
						...v,
						value: v.id,
						label: v.name
					}
				})
			},
			changeLevelTwo() {
				this.model.categoryThreeId = ''
				const levelOneItem = this.treeData.find(v => v.id === this.model.categoryOneId)
				const levelTwoItem = levelOneItem.children.find(v => v.id === this.model.categoryTwoId) || []
				this.levelThreeOptions = (levelTwoItem.children || []).map(v => {
					return {
						...v,
						value: v.id,
						label: v.name
					}
				})
				// console.log(this.levelThreeOptions)
			},
			loadTree() {
				var that = this;
				getAction('/wtCategory/list').then((res) => {
					// console.log(res.result);
					if (res.success) {
						// console.log(res)
						that.treeData = [];
						let treeList = res.result
						for (let a = 0; a < treeList.length; a++) {
							let temp = treeList[a];
							temp.isLeaf = temp.leaf;
							that.treeData.push(temp);
						}
						that.levelOneOptions = [...that.treeData].map(v => {
							return {
								...v,
								value: v.id,
								label: v.name
							}
						})
						let list = that.levelOneOptions.filter((item) => {
							if (item.id === that.model.categoryOneId) {
								return item.children
							}
						})
						if (list && list.length > 0) {
							that.levelTwoOptions = [...list[0].children].map((v) => {
								return {
									...v,
									value: v.id,
									label: v.name,
								}
							})
						}
						let list2 = that.levelTwoOptions.filter((item) => {
							if (item.id === that.model.categoryTwoId) {
								return item.children
							}
						})
						if (list2 && list2.length > 0) {
							that.levelThreeOptions = [...list2[0].children].map((v) => {
								return {
									...v,
									value: v.id,
									label: v.name,
								}
							})
						}
						// console.log('111',that.treeData);
						// debugger
					}
				});
			},
			add() {
				this.edit(this.modelDefault);
			},
			edit(record) {
				this.model = Object.assign({}, record);
				this.visible = true;
				this.items = record.model.split(',')
				// this.levelTwoOptions=record.model.split(',')
				this.loadTree();
			},
			submitForm() {
				const that = this;
				// 触发表单验证
				this.$refs.form.validate(valid => {
					if (valid) {
						that.confirmLoading = true;
						let httpurl = '';
						let method = '';
						if (!this.model.id) {
							httpurl += this.url.add;
							method = 'post';
						} else {
							httpurl += this.url.edit;
							method = 'put';
						}

						var models = this.model;
						//  console.log("123",this.items.join(","));

						models.model = this.items.join(",");
						httpAction(httpurl, models, method).then((res) => {
							if (res.success) {
								that.$message.success(res.message);
								that.$emit('ok');
							} else {
								that.$message.warning(res.message);
							}
						}).finally(() => {
							that.confirmLoading = false;
						})
					}

				})
			},
			onAdd() {
				this.items.push('')
				// this.model.model.push([])
			},
			onMinus() {
				this.items.pop('')
				// this.model.model.pop([])
			},

		}
	}
</script>
<style scoped>
	.components-input-demo-size {
		/* display: inline-block; */
	}

	.components-input-demo-size .ant-input {
		width: 100px;
		height: 32px;
		margin: 0 8px 8px 0;

	}

	.scroll-view {
		overflow: auto;
		overflow-y: scroll;
	}
</style>